<script setup>

import router from "../router/index.js";

const toIndex=()=>{
  router.push('/home/index')
}
const toAbout=()=>{
  router.push('/home/about')
}
const toService=()=>{
  router.push('/home/service')
}
const toContact=()=>{
  router.push('/home/contact')
}
</script>

<template>
  <div class="container">
    <nav class="sidebar">
      <ul class="menu">
        <li><a href="javascript:void(0)" @click="toIndex">首页</a></li>
        <li><a href="javascript:void(0)" @click="toAbout">关于我们</a></li>
        <li><a href="javascript:void(0)" @click="toService">服务</a></li>
        <li><a href="javascript:void(0)" @click="toContact">联系我们</a></li>
        <li><a href="javascript:void(0)" @click="router.push('/login')">退出系统</a></li>
      </ul>
    </nav>
    <div class="content">
      <!--  通过路由找到的组件，就会在这里进行渲染    -->
      <RouterView/>
    </div>
  </div>
</template>

<style scoped>
.container{
  width: 980px;
  margin: 0 auto;
}
.menu{
  list-style: none;
  width: 120px;
}
.menu li{
  height: 36px;
}
.sidebar{
  float: left;
}
.content{
  float: left;
  width: 800px;

}

</style>